<template>
<div class="page">
    <div class="pashead">
        <PasHead></PasHead>
    </div>
    <div class="pasmain container">
        <div class="main">
            <div class="steps">
                <Steps :current='current'>
                    <Step title="填写账户名称"></Step>
                    <Step title="验证身份"></Step>
                    <Step title="设置新密码"></Step>
                    <Step title="完成"></Step>
                </Steps>
            </div>
            <div class="form-view">
                <PasFirst v-if="current=='0'" @on-submit="submitFirst"></PasFirst>
                <PasSecond :data="secondData" v-if="current=='1'" @on-submit="submitSecond"></PasSecond>
                <PasThird v-if="current=='2'" @on-submit="submitThird"></PasThird>
                <PasFour v-if="current=='3'" :data="fourData"></PasFour>
            </div>
        </div>
    </div>
    <div class="pasfoot">
        <FooterWrapper></FooterWrapper>
    </div>
</div>
</template>

<script>
import PasHead from '@/pages/forget/list/PasHead'
import PasFirst from '@/pages/forget/list/PasFirst'
import PasSecond from '@/pages/forget/list/PasSecond'
import PasThird from '@/pages/forget/list/PasThird'
import PasFour from '@/pages/forget/list/PasFour'
import FooterWrapper from '@/components/Footer'
export default {
    components: {
        PasHead,
        PasFirst,
        PasSecond,
        PasThird,
        PasFour,
        FooterWrapper
    },
    data() {
        return {
            current: 0,
            secondData:{
                isLoading:false,
                data:{
                    phoneNum:'',

                }
            },
            fourData: {
                isLoading: false,
                data: {
                    time: 10

                }
            },
        }
    },
    methods: {
        submitFirst(formData) {
            // console.log(formData)
            this.current = 1
            this.secondData.data.phoneNum = formData.phoneNum
        },
        submitSecond() {
            this.current = 2

        },
        submitThird() {
            this.current = 3
        },

    },
}
</script>

<style lang="less" scoped>
.page {
    width: 100%;
    background-color: #F2F2F2;

    .pashead {
        width: 100%;
        height: 90px;
        background-color: #fff;
    }

    .pasmain {
        background-color: #fff;
        margin: 53px auto;

        .main {
            width: 100%;
            // height: 588px;

            .steps {
                width: 800px;
                margin: 0 auto;
                padding: 88px 0 70px;
            }
        }
    }
}
</style>
